<template>
  <div>

    <div class="row wrapper border-bottom white-bg page-heading">
      <div class="col-sm-4">
        <h2>项目详情</h2>
        <ol class="breadcrumb">
          <li>
            <router-link :to="{ name: 'home' }">
              主页
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'productList' }">
              项目列表
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'product' }">
              项目
            </router-link>
          </li>
          <li class="active">
            <strong>项目详情</strong>
          </li>
        </ol>
      </div>
    </div>

  <div class="wrapper wrapper-content animated fadeInUp">
    <div class="ibox ">
      <div class="ibox-title">
        <h5></h5>
        <div class="ibox-tools">
          <router-link :to="{ name: 'productEdit'}" class="btn btn-primary btn-xs" v-if="userId == productDetail.userid">
            <i class="fa fa-edit"></i> 编辑
          </router-link>
        </div>
      </div>
      <div class="ibox-content">
        <div class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-3 control-label">项目名称</label>
            <div class="col-sm-8">
              <p class="form-control-static">{{ productDetail.name }}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">项目描述</label>
            <div class="col-sm-8">
              <p class="form-control-static">{{ productDetail.description }}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">权限</label>
            <div class="col-sm-8">
              <p class="form-control-static">{{ productDetail.permissions }}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">人员</label>
            <div class="col-sm-8">
              <p class="form-control-static">{{ members }}</p>
            </div>
          </div>
          <div class="hr-line-dashed"></div>
          <div class="form-group" v-if="userId == productDetail.userid">
            <div class="col-sm-4 col-sm-offset-3">
              <router-link :to="{ name: 'productEdit'}" class="btn btn-primary">
                <i class="fa fa-edit"></i> 编辑
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

</template>

<script>
import server from '@/server/server.js'
import cookie from '@/server/cookie.js'
export default {
  name: 'productDetail',
  data () {
    return {
      userId: cookie.getCookie('id'),
      productDetail: {},
      members: '',
    }
  },
  created () {
    const vue = this
    // 获取问题列表
    const params = "productId=" + this.$route.params.productId
    server.get(server.getProductDetail, null, params, true, false, this, function(data) {
      vue.productDetail = data
      vue.config.ProductPermissions.forEach(function(element, index) {
        if (vue.productDetail.permissions == element.code) {
          vue.productDetail.permissions = element.value
        }
      })


      // 搜索所有用户
      server.get(server.getUserListUrl, null, '', true, false, this, function(data) {
          vue.userList = data;
          vue.productDetail.members.split(',').forEach(function(element, index) {
            vue.userList.forEach(function(element1, index1) {
              if (element == element1.id) {
                vue.members += (element1.username + ' ')
              }
            })
          })
      })


    })
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
